<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="app2">
			<!-- v-if="ture\false"用于是否显示数据，其值为true或false-->
			<p v-if="seen">现在你看到我了</p>
		</div>
		<div id="app3">
			<ol>
				<!--  v-for="数值 in 数组"，用于遍历数组-->
				<li v-for="todo in todos">
					{{todo.text}}
				</li>
			</ol>
		</div >
		
		<div id="app4">
			<p>{{message}}</p>
			<!--  v-on:click = "函数名" 用于给一个事件添加监听器-->
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		
		<div id="app5">
			<p>{{message1}}</p>
			<!--  v-model="绑定变量名"用于实现表单和应用状态之间的双向绑定-->
			<input v-model="message1"/>
		</div>
		
		<div id="app6">
			<ol>
				<!--
					现在我梦为每个todo-item提供todo
					对象，头都对象是变量，即其内容可以是动态的。
					我梦页需要为梅个组件提供一个"key"，稍后在
					作详细解释。
				-->
				<todo-item 
					v-for:"item in groceryList"
					v-bind:todo="item"
					v-bind:key="item.id">
					
				</todo-item>
			</ol>
		</div>
		<script type="text/javascript">
			var app2 = new Vue({
				el:"#app2",
				data:{
					seen:true
				}
			});
			var app3 = new Vue({
				el:"#app3",
				data:{
					todos:[
					{text:'学习JavaScript!'},
					{text:'学习Vue'},
					{text:'整个项目'}
					]
				}
			});
			//在数组后增加一项
			app3.todos.push({text:'新项目'})
			var app4 = new Vue({
				el:'#app4',
				data:{
					message:'Hello Vue.js!'
				},
				methods:{
					reverseMessage:function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			});
			var app5 = new Vue({
				el:'#app5',
				data:{
					message1:'hello vue!'
				}
			});
			Vue.component('todo-item',{
				props:['todo'],
				template:'<li>{{todo.text}}<\li>'
			});
			var app6 = new Vue({
				el:'#app6',
				data:{
					groceryList:[
						{id:0,text:'蔬菜'},
						{id:1,text:'奶酪'},
						{id:2,text:'随便其它'}
					]
				}
			});
		</script>
	</body>
</html>
